<template>
	<div id="box">
		<div id="arr">
			<div id="left">
				<div id="top">
					<h2>{{arr[0].world}}</h2>
					<p>{{arr[0].pl}}</p>
					<span @click="leave">
						立即进入
					</span>
				</div>
			</div>
			<router-link to="/active/flower?id=7">
				<img :src="$store.state.url+arr[0].url1">
			</router-link>
		</div>
		<div id="arr">
			<div id="left">
				<div id="top">
					<h2>{{arr[1].world}}</h2>
					<p>{{arr[1].pl}}</p>
					<span @click="leave1">
						立即进入
					</span>
				</div>
			</div>
			<router-link to="/active/mon">
				<img :src="$store.state.url+arr[1].url1">
			</router-link>
		</div>
		<div id="arr">
			<div id="left">
				<div id="top">
					<h2>{{arr[2].world}}</h2>
					<p>{{arr[2].pl}}</p>
					<span @click="leave2">
						立即进入
					</span>
				</div>
			</div>
			<router-link to="/active/newpeople?id=7">
				<img :src="$store.state.url+arr[2].url1">
			</router-link>
		</div>
	</div>
</template>
<script>
	export default {
		data() {
			return {
				arr: [{
					world: "2021年中秋月饼专属兑换",
					pl: "月饼卡专属兑换",
					url1: "/img/lfximg/4.jpg",
					id: 7
				}, {
					world: "2021年中秋节",
					pl: "早鸟价",
					url1: "/img/lfximg/4.jpg",
					id: 2
				}, {
					world: "2021年新人活动",
					pl: "新客享蛋糕折扣",
					url1: "/img/lfximg/6.png",
					id: 3
				}],
				value: ""
			}

		},
		mounted() {
			this.$store.commit('changeTypeNmame', 'active')
		},
		methods: {
			leave() {
				this.$router.push({
					path: '/active/flower',
					query: {
						id: 7
					}
				})
			},
			leave1() {
				this.$router.push({
					path: '/active/mon'
				})
			},
			leave2() {
				this.$router.push({
					path: '/active/newpeople',
					query: {
						id: 7
					}
				})
			}
		}
	}
</script>
<style scoped="scoped">
	* {
		background-color: #F8F8F8;
	}

	#arr {
		width: 1250px;
		height: 320px;
		display: flex;
		margin: 0 auto;
		margin-top: 120px;
		padding: 20px;
	}

	#left {
		width: 500px;
		height: 320px;
		background-color: white;
	}

	#top {
		width: 500px;
		height: 220px;
		background-color: white;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		box-sizing: border-box;
	}

	a {
		width: 750px;
		height: 220px;
		background-color: red;
	}

	h2 {
		margin-bottom: 10px;
		font-size: 27px !important;
		font-weight: 400;
		background-color: white;
	}

	p {
		margin-bottom: 40px;
		background-color: white;
	}

	span {
		width: 150px;
		height: 40px;
		border-radius: 20px;
		background-color: #FFE32A;
		line-height: 40px;
		text-align: center;
		cursor: pointer;
	}
</style>
